<template>
  <el-tooltip :content="isShow ? '关闭目录' : '展开目录'" placement="top">
    <div :style="buttonStyle" class="left-center-button">
      <img :src="toggleIcon" style="cursor: pointer" @click="handleClick" />
    </div>
  </el-tooltip>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

// 定义props
const props = defineProps({
  isShow: {
    type: Boolean,
    required: true
  },
  // 可以自定义margin
  margin: {
    type: String,
    default: '-30px'
  }
})

// 定义emit
const emit = defineEmits(['update:isShow'])

// 两个图标的base64字符串
const SHOW_ICON =
  ''
const HIDE_ICON =
  ''

// 计算属性返回当前应该显示的图标
const toggleIcon = computed(() => {
  return props.isShow ? HIDE_ICON : SHOW_ICON
})

// 计算按钮样式
const buttonStyle = computed(() => {
  return {
    margin: props.margin
  }
})

// 处理点击事件
const handleClick = () => {
  console.log('handleClick', props.isShow)
  emit('update:isShow', !props.isShow)
}
</script>

<style scoped>
.left-center-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  cursor: pointer;
}
</style>
